import { useStore } from '@shared/store';
import { IAdminStore } from '@shared/types';
import { observer } from 'mobx-react';
import React from 'react';

import { Layout, Nav, Avatar, Space } from '@douyinfe/semi-ui';
import { MainViewProps } from '.';
import LocaleSelector from '@admin/components/LocaleSelector';

const Header: React.FC<MainViewProps> = ({ navStore }): JSX.Element => {
    const store = useStore<IAdminStore>();
    const { user } = store;
    
    return (
        <Layout.Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
            <Nav
                mode="horizontal"
                footer={
                    <Space>
                        {/* <Button
                            theme="borderless"
                            icon={<IconBell size="large" />}
                            style={{
                                color: 'var(--semi-color-text-2)',
                            }}
                        /> */}
                        <LocaleSelector position={'bottom'} />
                        <Avatar color="orange" size="small" src={user.head}>
                            {user.name}
                        </Avatar>
                    </Space>
                }
            ></Nav>
        </Layout.Header>
    );
};

export default observer(Header);
